Reveal demo deck

reveal-white-text.svg

The HTML Presentation Framework

NOTE: Hello
World!
extra
text-654654
test test test

6543221032103540


Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

note: more notes


Vertical Slides

Slides can be nested insdie of each other.
Use the Space key to navigate through all slides.

image

--

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

--

Basement Level 2

That's it, time to go back up.

image


Slides

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com


Hidden Slides

This slide is visible in the source, but hidden when the presentation is viewed. You can show all hidden slides by setting the showHiddenSlides config option to true.


Pretty Code

	import React, { useState } from 'react';
	function Example() {
	const [count, setCount] = useState(0);
	return (
	...
  );
}

Code syntax highlighting courtesy of highlight.js


With Animations

import React, { useState } from 'react';

	function Example() {
	  const [count, setCount] = useState(0);

	  return (
		<div>
		  <p>You clicked {count} times</p>
		  <button onClick={() => setCount(count + 1)}>
			Click me
		  </button>
		</div>
	  );
	}

	function SecondExample() {
	  const [count, setCount] = useState(0);

	  return (
		<div>
		  <p>You clicked {count} times</p>
		  <button onClick={() => setCount(count + 1)}>
			Click me
		  </button>
		</div>
	  );
	}
</script>

Point of View

Press ESC to enter the slide overview.

Hold down the alt key (ctrl in Linux) and click on any element to zoom towards it using zoom.js. Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)


Auto-Animate

Automatically animate matching elements across slides with Auto-Animate


Auto-Animate


Auto-Animate


Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.


Markdown Support

Write content using inline or external Markdown.

Instructions and more info available in the docs.

<section data-markdown>
  ## Markdown Support

  Write content using inline or external Markdown.
  Instructions and more info available in the [docs](https://revealjs.com/markdown/).
</section>

Add the r-fit-text class to auto-size text

FIT TEXT


Fragments

Hit the next arrow...

... to step through ...


... a fragmented
slide.

note: This slide has fragments which are also stepped through in the notes window.

--

Fragment Styles

There's different types of fragments, like:

grow

shrink

fade-out

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green


<h2>Transition Styles</h2>
<p>
	You can select from different transitions, like: <br>
	<a href="?transition=none#/transitions">None</a> -
	<a href="?transition=fade#/transitions">Fade</a> -
	<a href="?transition=slide#/transitions">Slide</a> -
	<a href="?transition=convex#/transitions">Convex</a> -
	<a href="?transition=concave#/transitions">Concave</a> -
	<a href="?transition=zoom#/transitions">Zoom</a>
</p>

Themes

reveal.js comes with a few themes built in:
Black (default) - White - League - Sky - Beige - Simple
Serif - Blood - Night - Moon - [Solarized]()


Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

--

Gradient Backgrounds

`<section data-background-gradient=

	"linear-gradient(to bottom, #ddd, #191919)">`
	

--

Image Backgrounds

	<!-- .slide data-background="image.png" -->

--

Tiled Backgrounds

<!-- .slide data-background="https://static.slid.es/reveal/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px" -->

--

Video Backgrounds

<!-- .slide data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4" data-background-color="#000000" -->

... and GIFs!


This is the Title of this Slide

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • tium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequa
  • augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit a
  • Nam quam nunc
    Umsetzungsschritte
    Header #2
  • Curabitur
  • condimentum
  • Maecenas
    Header #3
  • justo
  • rhoncus
  • semper
Source: Copied from Lorem ipsum dolor Generator

Hello

World!


- [[2024/11/2024-11-19.md|2024-11-19]]
- [[MD Table.md|MD Table]]
- [[Reveal demo deck.md|Reveal demo deck]]
- [[Welcome.md|Welcome]]
- [[_templates/Inline Styling small font.md|Inline Styling small font]]
- [[_templates/Slide Template-con-2-1-box.md|Slide Template-con-2-1-box]]
- [[_templates/Slide Template-Grid Hello World.md|Slide Template-Grid Hello World]]
- [[_templates/Templater Dataview to MD.md|Templater Dataview to MD]]
- [[_templates/templater 2.md|templater 2]]
- [[export/demo/dist/css/theme/README.md|README]]
- [[export/demo/plugin/chalkboard/README.md|README]]
- [[export/demo/plugin/chart/README.md|README]]
- [[export/demo/plugin/customcontrols/README.md|README]]
- [[export/demo/plugin/menu/CONTRIBUTING.md|CONTRIBUTING]]
- [[export/demo/plugin/menu/README.md|README]]
- [[Advanced Slides Documentation/Frontmatter Options.md|Frontmatter Options]]
- [[Advanced Slides Templates/tpl-con-2-1-box.md|tpl-con-2-1-box]]
- [[Projects/UUhimsy.md|UUhimsy]]
- [[Untitled.md|Untitled]]

final slide

Title

Contents

Drawing 2024-11-23 00.11.20.excalidraw.svg

World!


Drawing 2024-11-23 00.11.20.excalidraw.svg


Drawing 2024-11-23 00.11.20.excalidraw.svg


Drawing 2024-11-23 00.11.20.excalidraw.svg

A qoute